<script setup lang="ts">
import { links } from '@/utils/constants';
import DevelopingCourse from './developing-course.vue';
// 参与贡献
const contribution = () => {
  window.location.href = 'https://gitee.com/jianmu-dev/jianmu-ci-server';
};
</script>

<template>
  <!-- 产品特性 -->
  <div class="product-characteristics">
    <!-- 标题 -->
    <div class="product-characteristics-title">
      产品特性
    </div>
    <div class="product-content">
      <!-- 产品公共部分 -->
      <div class="product-common-container">
        <img
          class="product-img"
          src="@/assets/wap/svgs/git-ops.svg"
        >
        <div class="product-title">
          多架构部署
        </div>
        <div class="product-description">
          支持AMD64、ARM64等多架构部署
        </div>
      </div>
      <div class="product-common-container">
        <img
          class="product-img"
          src="@/assets/wap/svgs/environment.svg"
        >
        <div class="product-title">
          云原生架构
        </div>
        <div class="product-description">
          <p>多云集成与原生kubernetes</p>
          <p>容器化技术支持灵活部署</p>
        </div>
      </div>
      <div class="product-common-container">
        <img
          class="product-img"
          src="@/assets/wap/svgs/technological-process.svg"
        >
        <div class="product-title">
          环境隔离性
        </div>
        <div class="product-description">
          无需担心环境的不一致性，每个环境都在隔离的容器内运行，运行后自动销毁回收
        </div>
      </div>
    </div>
  </div>
  <!-- 参与贡献-按钮 -->
  <div
    class="common-btn"
    @click="contribution"
  >
    参与贡献
  </div>
  <!-- 平台案例 -->
  <div class="case">
    <div class="title">平台案例</div>
    <p class="description">
      GitLink是中国计算机协会官方指定的开源创新服务平台，提供分布式协作开发、一站式过程管理、多层次代码分析、多维度用户画像等功能。
    </p>
    <p class="description">
      建木价值：通过为GitLink提供DevOps引擎，打通编码、测试、构建、部署等开发运维环节，帮助开发者提高开发效率和交付质量。
    </p>
    <div class="demo">
      <img src="~@/assets/wap/pngs/platform-case-demo.png" alt="">
    </div>
    <a :href="links.Gitlink">
      <div class="common-btn">
        立即体验
      </div>
    </a>
  </div>
  <!--发展历程-->
  <developing-course/>
  <!-- 所属社区 -->
  <div class="belonging-community-container">
    <div class="belonging-community-title">
      所属社区
    </div>
    <div class="community-img-container">
      <img
        src="@/assets/wap/pngs/belonging-community.png"
        class="community-img"
      >
    </div>
    <div class="community-description">
      “木兰开源社区”建立于2019年8月，是国家重点研发计划重点专项“云计算和大数据开源社区生态系统”的核心成果。旨在促进产学研用各方开源领域的交流，推动国家科技创新成果开源，加强企业、科教研单位和行业用户之间的沟通，推动开源成果转化落地，同时为各类开源项目提供中立托管，保证开源项目的持续发展不受第三方影响，通过更加开放的方式来打造和完善开源社区生态。
    </div>
  </div>
  <!-- 参与单位 -->
  <div class="participating-units-container">
    <div class="participating-units-title">
      合作伙伴
    </div>
    <!-- 参与单位图片 -->
    <div class="participating-units-imgs">
      <div class="item-row">
        <a :href="links.Electronic" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-1.svg" alt="">
        </a>
        <a :href="links.Duguang" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-2.svg" alt="">
        </a>
        <a :href="links.JiuZhouYun" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-3.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.TuZhan" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-4.svg" alt="">
        </a>
        <a :href="links.Smart" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-5.svg" alt="">
        </a>
        <a :href="links.Gitee" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-6.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.ShanYang" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-7.svg" alt="">
        </a>
        <a :href="links.JiHu" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-8.svg" alt="">
        </a>
        <a :href="links.ShenWanHongYuan" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-9.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.ShOpen" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-10.svg" alt="">
        </a>
        <a :href="links.JinShi" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-11.svg" alt="">
        </a>
        <a :href="links.WenZhou" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-12.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.DongHua" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-13.svg" alt="">
        </a>
        <a :href="links.OpenTekr" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-14.svg" alt="">
        </a>
        <a :href="links.Gitlink" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-15.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.NetTouch" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-16.svg" alt="">
        </a>
        <a :href="links.BaiYulan" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-17.svg" alt="">
        </a>
        <a :href="links.XCharge" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-18.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.ZhengYi" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-19.svg" alt="">
        </a>
        <a :href="links.WuGen" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-20.svg" alt="">
        </a>
        <a :href="links.Nepx" target="_blank" class="item">
          <img src="~@/assets/wap/svgs/cooperator-21.svg" alt="">
        </a>
      </div>
    </div>
  </div>
  <!-- 九州云描述 -->
  <div class="cloud-container">
    <div class="cloud-description">
      建木团队在“开源·赋能云边变⾰”的理想和共同⽬标指引下，重新对DevOps &
      OpsDev领域中共性、有价值的需求做了⼀次完整的梳理和重写，最终以“建⽊”开源项⽬的形态呈现。
    </div>
    <div class="cloud-img-container">
      <div class="single we-chat">
        <span class="cloud-title">微信公众号</span>
        <img src="@/assets/wap/pngs/we-chat.png">
      </div>
      <div class="single">
        <span class="cloud-title">建木交流QQ群</span>
        <img src="@/assets/wap/pngs/qq.png">
        <span class="qq-num">群号: 273649324</span>
      </div>
    </div>
    <!-- 链接 -->
    <div class="cloud-links">
      <div>官⽹：<a href="https://jianmu.dev">https://jianmu.dev</a></div>
      <div>
        代码：<a href="https://gitee.com/jianmu-dev">https://gitee.com/jianmu-dev</a>
      </div>
      <div>
        文档：<a href="https://docs.jianmu.dev">https://docs.jianmu.dev</a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
// 公共按钮样式
.common-btn {
  width: 690px;
  height: 94px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 94px;
  color: #fff;
  background: #0f2647;
  border-radius: 10px;
  margin: 60px 0px 80px 30px;
}

// 产品特性
.product-characteristics {

  .product-characteristics-title {
    padding: 0px 30px;
    font-size: 36px;
    font-weight: 700;
  }

  .product-content {
    width: 750px;
    height: 1200px;
    padding: 0px 30px;
    background: url('@/assets/wap/svgs/product.svg');
    background-size: 100%;
    // 产品公共样式
    .product-common-container {
      margin-top: 50px;

      .product-img {
        width: 192px;
        height: 172px;
      }

      .product-title {
        font-size: 30px;
        font-weight: 700;
        margin: 20px 0;
      }

      .product-description {
        font-size: 30px;
        line-height: 48px;
      }
    }
  }
}

// 平台案例
.case {
  .title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
    padding: 0 30px;
  }

  .description {
    padding: 0 30px;
    color: #042749;
    font-size: 30px;
    line-height: 48px;

    &:nth-child(3) {
      margin: 30px 0 40px;
    }
  }

  .demo {
    margin: 0 auto;
    box-shadow: 0 0 30px 0 #E1E6ED;
    width: calc(100% - 60px);

    img {
      width: 100%;
    }
  }

}

// 所属社区
.belonging-community-container {
  padding: 0 30px;
  margin-top: 60px;
  margin-bottom: 50px;

  .belonging-community-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
  }

  .community-img-container {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;

    .community-img {
      width: 248px;
      height: 86px;
    }
  }

  .community-description {
    font-size: 30px;
    line-height: 48px;
  }
}

// 参与单位
.participating-units-container {
  width: 750px;
  margin-bottom: 60px;

  .participating-units-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 30px;
  }

  .participating-units-imgs {
    width: 750px;
    padding: 40px 30px 0;

    .item-row {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 18px;

      .item {
        margin-right: 18px;
        width: 218px;
        height: 64px;
        box-sizing: border-box;

        img {
          border-radius: 4px;
          box-sizing: border-box;
          border: 1px solid #DFE7EE;
          width: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 九州云描述
.cloud-container {
  padding: 0 30px;
  margin-bottom: 68px;

  .cloud-description {
    font-size: 30px;
    line-height: 48px;
    margin-bottom: 60px;
  }

  .cloud-links {
    font-weight: 700;
    font-size: 30px;
    line-height: 48px;
  }

  .cloud-img-container {
    padding-bottom: 50px;
    display: flex;
    justify-content: center;

    .single {
      display: flex;
      flex-direction: column;
      align-items: center;

      .cloud-title {
        font-size: 28px;
        color: #042749;
        opacity: 0.5;
        line-height: 30px;
      }

      img {
        width: 240px;
        height: 240px;
      }

      .qq-num {
        font-size: 24px;
        line-height: 23px;
      }
    }

    .we-chat {
      margin-right: 46px;
    }
  }
}
</style>
